<template>
  <view class="ai-radio-group" :class="{'ai-radio-group--block': block}">
    <ai-radio v-for="item in options"
      :text="item.label"
      :value="item.value"
      :checked="innerValue == item.value"
      :disabled="item.disabled"
      :key="'radio-v-' + item.value"
      @change="onchange">
    </ai-radio>
  </view>
</template>

<script>
  export default {
    name: "ai-radio-group",
    emits: ["change", "update:value"],
    props: {
      options: {
        type: Array,
        default: []
      },
      value: [String, Number],
      disabled: {
        type: Boolean,
        default: false
      },
      block: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        innerValue: ""
      };
    },
    watch: {
      value: {
        handler: function(n, o) {
          this.innerValue = n
        },
        immediate: true
      }
    },
    methods: {
      onchange(e) {
        let v = e.value
        this.innerValue = v
        this.$emit("change", v)
        this.$emit("update:value", v)
      }
    },
  }
</script>

<style lang="scss">
  @import "@/styles/_radio_checkbox.scss"
</style>